import React from 'react'
import { Row, Col, Card, Button, Statistic } from 'antd'

import './StatisticsGroup.less'

const StatisticsGroup = ({ history, statistics }) => {
  const onClickDetail = (router) => {
    history.push({
      pathname: router,
    })
  }

  return (
    <Row>
      <Col span={24}>
        <Card bordered={false} className="content-card">
          {statistics.map((statistic) => {
            const canClick = statistic.key === 'contractNum'
            return (
              <Card.Grid
                className={`${canClick ? 'cursor' : ''} card-grid`}
                onClick={() => {
                  statistic.detailLink && history.push(statistic.detailLink)
                }}
                hoverable={false} key={statistic.key}>
                <Statistic
                  title={
                    <span className={`${canClick ? 'primary' : ''}`}>{statistic.label}</span>
                  }
                  formatter={(value) => {
                    return <span className={`${canClick ? 'primary' : ''}`}>{value}</span>
                  }} value={statistic.value} />
                {statistic.showDetail && <Button onClick={() => onClickDetail(statistic.detailLink)} type="link" className="detail-btn">详情</Button>}
              </Card.Grid>
            )
          })}
        </Card>
      </Col>
    </Row>
  )
}

export default StatisticsGroup
